<template>
  <div class="cb-main-container">
    <div class="search-box">
      <el-form ref="searchFormRef" :model="searchConfig.search" inline>
        <el-form-item prop="customerId" label="客户名称">
          <el-select
              v-model="searchConfig.search.customerId"
              remote
              filterable
              :remote-method="customerSearch"
              :loading="searchConfig.customerLoading"
              placeholder="请输入负责人名称"
              style="width: 100%">
            <el-option
                v-for="item in searchConfig.customerOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            />
            <template #empty>
              暂无数据
            </template>
          </el-select>
        </el-form-item>
        <el-form-item prop="responsiblePersonId" label="负责人">
          <el-select
              v-model="searchConfig.search.responsiblePersonId"
              remote
              filterable
              :remote-method="userSearch"
              :loading="searchConfig.userLoading"
              placeholder="请输入负责人名称"
              style="width: 100%">
            <el-option
                v-for="item in searchConfig.userOptions"
                :key="item.id"
                :label="item.nickname"
                :value="item.id"
            />
            <template #empty>
              暂无数据
            </template>
          </el-select>
        </el-form-item>
        <el-form-item prop="flowUpTime" label="跟进时间">
          <el-date-picker
              v-model="daterange"
              type="daterange"
              range-separator="到"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item>
          <el-button icon="refresh" @click="onReset">重置</el-button>
          <el-button type="primary" icon="search" @click="onSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import {reactive, ref, watch} from "vue";
import { pageList as  customerPageList} from '@/api/erp/customer.js'
import { pageList as userPageList } from '@/api/system/sysUser.js'

defineOptions({
  name: '/erp/customerManagement/followUp'
})

const searchFormRef = ref(null)

const searchConfig = reactive({
  search: {
    responsiblePersonId: '',
    customerId: "",
    startTime: '',
    entTime: '',
    pageNum: 1,
    pageSize: 10,
    total: 0,
  },
  customerLoading: false,
  customerOptions: [],
  loadingText: '加载中',
  userLoading: false,
  userOptions: []
})

const daterange = ref([])
watch(() => daterange.value, (newVal) => {
  if (newVal && newVal.length === 2) {
    searchConfig.search.startTime = newVal[0]
    searchConfig.search.entTime = newVal[1]
  } else {
    // 如果清空了日期，可以重置字段
    searchConfig.search.startTime = ''
    searchConfig.search.entTime = ''
  }
})


const tableConfig = reactive({
  data: [],
  size: 'large',
  emptyText: '暂无数据'
})

/**
 * 重置
 */
const onReset = () => {
  searchFormRef.value.resetFields()
  searchConfig.search.pageNum = 1
  requestPageList()
}

/**
 * 搜索
 */
const onSearch = () => {
  searchConfig.search.pageNum = 1
  requestPageList()
}

/**
 * 请求分页
 */
const requestPageList = () => {

}

/**
 * 客户搜索
 */
const customerSearch = (query) => {
  if (query) {
    searchConfig.customerLoading = true
    customerPageList({name: query, pageNo: 1, pageSize: 99}).then(resp => {
      searchConfig.customerOptions = resp.data.data
      searchConfig.customerLoading = false
    })
  } else {
    searchConfig.customerOptions = []
  }
}

/**
 * 负责人搜索
 */
const userSearch = (query) => {
  if (query) {
    searchConfig.userLoading = true
    userPageList({nickname: query, pageNo: 1, pageSize: 99}).then(resp => {
      searchConfig.userOptions = resp.data.data
      searchConfig.userLoading = false
    })
  } else {
    searchConfig.userOptions = []
  }
}
</script>

<style scoped lang="scss">
.cb-main-container {
  display: flex;
  flex-direction: column;

  .search-box {
    @include containerStyle;
    padding-bottom: 0;
  }
}
</style>